import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { Router } from '@angular/router';

@Component({
  selector: 'app-profession-list',
  templateUrl: './profession-list.component.html',
  styleUrls: ['./profession-list.component.css']
})
export class ProfessionListComponent implements OnInit {
  validateForm: FormGroup;
  listOfData = [
    {
      id: 1,
      name: '战士',
      weapon: '剑',
      hero: '地狱咆哮',
      skill: '武器',
      status: 'A',
    },
    {
      id: 2,
      name: '圣骑士',
      weapon: '锤子',
      hero: '佛丁',
      skill: '防护',
      status: 'A',
    },
    {
      id: 3,
      name: '死亡骑士',
      weapon: '斧头',
      hero: '巫妖王',
      skill: '邪恶',
      status: 'A',
    },
    {
      id: 4,
      name: '猎人',
      weapon: '弓箭',
      hero: '希尔瓦娜斯',
      skill: '射击',
      status: 'D',
    },
  ];
  statusType = {
    A: '活动',
    D: '禁用',
  };
  checked = false;
  listOfCurrentPageData = [];
  setOfCheckedId = new Set<number>();

  btnDisabled = true;
  btnActive = true;

  constructor(
    private fb: FormBuilder,
    private modal: NzModalService,
    private router: Router
  ) {
    this.validateForm = this.fb.group({
      name: [null],
      weapon: [null],
      hero: [null],
      skill: [null],
      status: [null],
    });
  }

  ngOnInit(): void {
    this.onCurrentPageDataChange(this.listOfData);
  }

  updateCheckedSet(id: number, checked: boolean): void {
    if (checked) {
      this.setOfCheckedId.add(id);
    } else {
      this.setOfCheckedId.delete(id);
    }
  }

  onCurrentPageDataChange(listOfCurrentPageData): void {
    this.listOfCurrentPageData = listOfCurrentPageData;
    this.refreshCheckedStatus();
  }

  refreshCheckedStatus(): void {
    this.checked = this.listOfCurrentPageData.every(val => this.setOfCheckedId.has(val.id));
    const checkedData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id));
    this.btnDisabled = checkedData.every(val => val.status === 'D');
    this.btnActive = checkedData.every(val => val.status === 'A');
  }

  onItemChecked(id: number, checked: boolean): void {
    this.updateCheckedSet(id, checked);
    this.refreshCheckedStatus();
  }

  onAllChecked(checked: boolean): void {
    this.listOfCurrentPageData.forEach(val => this.updateCheckedSet(val.id, checked));
    this.refreshCheckedStatus();
  }

  clearChecked(): void {
    this.setOfCheckedId.clear();
    this.refreshCheckedStatus();
  }

  queryRaceList(): void {
    console.warn(this.validateForm.value);
  }

  deleteHandle(data): void {
    this.modal.confirm({
      nzTitle: '职业',
      nzContent: '是否删除' + data.name,
      nzOnOk: () => {

      }
    });
  }

  addRace(): void {
    this.router.navigate(['/profession/add']);
  }

  nextPage(data): void {
    this.router.navigate(['/profession/add'], { queryParams: { id: data.id, name: data.name } });
  }

  clickHandle(type: string): void {
    const checkedData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id));
    if (checkedData.length <= 0) { return; }
    console.warn(checkedData);
  }
}
